<template>
  <div class="container">
    <el-container style="width:98vw;height:100vh">
  <el-header style="background:#242f42;color:#fff; display: flex;
    display: -webkit-flex;">
      <div style="float:left;">
           &emsp; <i class="el-icon-s-fold"></i>&emsp;
            <span>后台管理系统</span>
      </div>
       
     
    <div style="float:right;margin-left:70%">
        <i class="el-icon-close"></i>&emsp;
        <i class="el-icon-bell"></i>&emsp;
       
            <img :src="imgSrc" alt="" sizes="" srcset="" width="35vw" style="" id="img1">&emsp;
            <span> admin <i class="el-icon-caret-bottom"></i></span>
     
    </div>
  </el-header>
  <el-container>
    <el-aside width="200px">

   <el-row>
    <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b">
      <el-submenu index="1">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>系统首页</span>
        </template>
        <el-menu-item-group>
          <template slot="title">分组一</template>
          <el-menu-item index="1-1">选项1</el-menu-item>
          <el-menu-item index="1-2">选项2</el-menu-item>
        </el-menu-item-group>
        <el-menu-item-group title="分组2">
          <el-menu-item index="1-3">选项3</el-menu-item>
        </el-menu-item-group>
        <el-submenu index="1-4">
          <template slot="title">选项4</template>
          <el-menu-item index="1-4-1">选项1</el-menu-item>
        </el-submenu>
      </el-submenu>
      <el-menu-item index="2">
        <i class="el-icon-menu"></i>
        <span slot="title">基础表格</span>
      </el-menu-item>
      <el-menu-item index="3">
        <i class="el-icon-document"></i>
        <span slot="title">tab选项卡</span>
      </el-menu-item>
      <el-menu-item index="4">
        <i class="el-icon-setting"></i>
        <span slot="title">表单相关</span>
      </el-menu-item>
       <el-menu-item index="5">
        <i class="el-icon-document"></i>
        <span slot="title">基本表单</span>
      </el-menu-item>
       <el-menu-item index="6">
        <i class="el-icon-menu"></i>
        <span slot="title">三级菜单</span>
      </el-menu-item>
       <el-menu-item index="7">
        <i class="el-icon-setting"></i>
        <span slot="title">文件上传</span>
      </el-menu-item>
       <el-menu-item index="8">
        <i class="el-icon-document"></i>
        <span slot="title">自定义图标</span>
      </el-menu-item>
       <el-menu-item index="9">
        <i class="el-icon-menu"></i>
        <span slot="title">schart图表</span>
      </el-menu-item>
       <el-menu-item index="10">
        <i class="el-icon-document"></i>
        <span slot="title">表单相关</span>
      </el-menu-item>
       <el-menu-item index="11">
        <i class="el-icon-mobile"></i>
        <span slot="title">拖拽组件</span>
      </el-menu-item>
         <el-menu-item index="12">
        <i class="el-icon-coin"></i>
        <span slot="title">国际化功能</span>
      </el-menu-item>
         <el-menu-item index="13">
        <i class="el-icon-setting"></i>
        <span slot="title">错误处理</span>
      </el-menu-item>
         <el-menu-item index="14">
        <i class="el-icon-document"></i>
        <span slot="title">支持作者</span>
      </el-menu-item>

    </el-menu>
</el-row>


    </el-aside>
    <el-container>
      <el-main>

      <el-container style="margin-left:20px">
  <el-header id="container_head" style="height:40px;  background-color:#fff">
      <div>
        <el-button type="primary"  size="medium">中等按钮<i class="el-icon-close"></i></el-button>
          <el-button size="medium">中等按钮<i class="el-icon-close"></i></el-button>

            <el-button size="medium">中等按钮<i class="el-icon-close"></i></el-button>
      </div>
        <div style="float:right;margin-left: 60%;">
            <el-button type="primary" size="medium">中等按钮<i class="el-icon-close"></i></el-button>
        </div>
      
  </el-header>
  <el-container style="height:80vh;background:#fff">
    <el-aside width="300px">

<el-container style="height:80vh;background:#fff">
  <el-header style="height:37vh;width:300px;background:#fff;">
      <dl  style="width:280px;border-bottom:2px solid #cccccc;height:100px;margin:20px auto;background:#fff">
          <dt style="float:left;padding-left:25px"><img :src="imgSrc" alt="" sizes="" srcset="" width="70vw" style="" id="img1">&emsp;
            </dt>
          <dd  style="float:left;display:inline-block;line-height:30px">
              <span > admin</span> <br>
              <p style="color:#666;font-size:12px;">超级管理员</p>
          </dd>
      </dl>
    <p style="line-height:23px;color:#666;font-size:12px;margin-left:-4vw">上次登录时间:&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&ensp;2019-11-01</p>
    <p style="line-height:23px;color:#666;font-size:12px;text-align:left;"> 上次登录地点:&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp; 东莞</p>


  </el-header>
  <el-main style="background:#fff;line-height:35px;">
      <h3  style="border-bottom:2px solid #cccccc;line-height:35px;text-align:left;margin-left:15px">语言详情</h3>
    <div style="width:20vw;text-align:left;font-size:12px;line-height:20px;margin-left:15px">
 Vue
<el-progress :percentage="customColors[0].percentage" :color="customColors[0].color"></el-progress>
JavaScript
<el-progress :percentage="customColors[1].percentage" :color="customColors[1].color"></el-progress>
CSS
<el-progress :percentage="customColors[2].percentage" :color="customColors[2].color"></el-progress>
 HTML
<el-progress :percentage="customColors[3].percentage" :color="customColors[3].color"></el-progress>
   
    </div>
  </el-main>
</el-container>

    </el-aside>
    <el-container>
      <el-main style="line-height:35px; height:20vh">

           <div class="demo-basic--circle">
        <div class="block" style="background:none;display: flex;
    display: -webkit-flex;background:#f0f0f0">
               <dl style="width:30%;height:80px;line-height:6vh; background:#fff;margin:20px">
                <dt style="float:left;width:6vw;height:13vh;">  <el-avatar shape="square" :size="50" :src="imgSrc1" style="width:100%;height:100%"></el-avatar></dt>
                <dd style="float:left;margin-left:15px">
                    <h2 style="color:#2d8cf0">1234</h2>
                    <p style="color:#999999;font-size:14px">用户访问量</p>
                </dd>
            </dl>
           <dl style="width:30%;height:80px;line-height:6vh; background:#fff;margin:20px">
                <dt style="float:left;width:6vw;height:13vh;">  <el-avatar shape="square" :size="50" :src="imgSrc2" style="width:100%;height:100%"></el-avatar></dt>
                <dd style="float:left;margin-left:15px">
                    <h2 style="color:#2d8cf0">321</h2>
                    <p style="color:#999999;font-size:14px">系统消息</p>
                </dd>
            </dl>
             <dl style="width:30%;height:80px;line-height:6vh; background:#fff;margin:20px">
                <dt style="float:left;width:6vw;height:13vh;">  <el-avatar shape="square" :size="50" :src="imgSrc3" style="width:100%;height:100%"></el-avatar></dt>
                <dd style="float:left;margin-left:15px">
                    <h2 style="color:#2d8cf0">5000</h2>
                    <p style="color:#999999;font-size:14px">数量</p>
                </dd>
            </dl>
        
        </div>
      </div>
   
      </el-main>
      <el-footer style="height:55vh; background:#f0f0f0">
          
           <div style="width:54vw;margin:20px;background:#fff;text-align:left;">
        <p style="height:40px;line-height:40px;border-bottom:2px solid #eee">待办事项 <span style="float:right;color:#409eff;font-size:12px;cursor: pointer;" @click="addfun()">添加</span></p>

        <ul style="list-style:none;padding-left:20px">
            <li v-for="(item,index) in arr" :key="index" style="width:50vw;height:40px;line-height:25px;">
                <span style="float:left;padding-top:10px"><el-checkbox v-model="item.duo" @change="duofun(index)"></el-checkbox>&emsp;<span ref="abc">{{item.con}}</span></span>
                  <el-button type="text" @click="delfun(index)" style="float:right;padding-top:10px" ><span ><i class="el-icon-edit"></i> <i class="el-icon-delete" ></i> </span></el-button>
                 
                 
                 <br></li>
        </ul>
    </div>

      </el-footer>
    </el-container>
  </el-container>
</el-container>

      </el-main>
      <el-footer style="height:38vh;display: flex; display: -webkit-flex;  justify-content: center; align-items: center;">
          
    <Echart-chart2 :ids="1" :obj="obj1"></Echart-chart2>
    <Echart-chart2 :ids="2" :obj="obj2"></Echart-chart2>
          
      </el-footer>
    </el-container>
  </el-container>
</el-container>

  </div>
</template>

<script>
import EchartChart2 from '../../components/echarts/EchartChart2.vue'

export default {
  data() {
    return {
        imgSrc:require('../../assets/imges/dog.png'),
        imgSrc1:require('../../assets/imges/ren.png'),
        imgSrc2:require('../../assets/imges/ling.png'),
        imgSrc3:require('../../assets/imges/bao.png'),

        customColors: [
          {color: '#f56c6c', percentage: 20},
          {color: '#e6a23c', percentage: 40},
          {color: '#5cb87a', percentage: 60},
          {color: '#1989fa', percentage: 80},
          {color: '#6f7ad3', percentage: 100}
        ],
        arr:[
            {
            con:'今天要修复100个bug',
            duo:false
          },
         {
            con:'今天要修复100道题',
            duo:false
          },
           {
            con:'今天要创建30道题',
            duo:false
          },
            ],
      obj1:{
           title: {
                text:'最近一周各品类销售图'
            },
            legend: {
                show: true,
                left:'45%'
            },
              tooltip: {
                trigger: 'axis',
                axisPointer: {
                type: 'shadow'
                }
              },
            grid:{
                  x:50,
                  y:30,
                  x2:10,
                  y2:25,
                  borderWidth:100 
               },
            xAxis: {
            type: 'category',
            data:['Mon', 'Tue', 'Wed', 'Thu', 'Fri', ],
       
          },
          yAxis: {
              type: 'value'
          },
          series: [
              {
              name:'家电',
              data:[234,278,270,190,230,],
              label:"labelOption",
              type:'bar',
              showBackground: true,
              itemStyle: {
                    color: '#4a90e2'
                }
              },
              {
              name:'百货',
              data:[164,178,190,130,160,],
               label:"labelOption",
              type:'bar',
               showBackground: true,
                backgroundStyle: {
                    color: 'rgba(180, 180, 180, 0.2)'
                },
                  itemStyle: {
                    color: '#f5a623'
                }
              },
              {
              name:'食品',
              data:[144,198,170,235,120],
              label:"labelOption",
              type:'bar',
               showBackground: true,
                backgroundStyle: {
                    color: 'rgba(180, 180, 180, 0.2)'
                },
                 itemStyle: {
                    color: '#e1251b'
                } 
              },
          ]
      },
     obj2:{
          title: {
                text:'近几个月各品类销售趋势'
            },
              legend: {
                data: ['家电', '百货', '食品',],
                show: true,
                top:'1%',
                left:'50%'
            },
             tooltip: {
                trigger: 'axis'
            },
             grid:{
                  x:50,
                  y:30,
                  x2:10,
                  y2:25,
                  borderWidth:100 
               },
            xAxis: {
            type: 'category',
            data:['六月','七月', '八月', '九月', '十月',],
       
          },
          yAxis: {
              type: 'value'
          },
          series: [
              {
              name:'家电',
              data:[234, 278, 270, 190, 230],
              type:'line',
                 itemStyle: {
                    color: 'orange'
                } 
              },
              {
              name:'百货',
              data: [164, 178, 150, 135, 160],
              type:'line',
              },
              {
              name:'食品',
              data: [74, 118, 200, 235, 90],
              type:'line',
              },
          ]
     },
    }
  },
    methods: {
     addfun(){
         let obj = {
            con:'今天要写100行代码加几个bug吧',
            duo:false
          }
         this.arr.push(obj)
     },
        delfun(index) {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.arr.splice(index,1)
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      }
    },
     duofun(index){
          if(this.arr[index].duo==true){
            // this.$refs.abc[index].style.textDecoration=line-through
               this.$refs.abc[index].style="text-decoration:line-through"
          }else{
               this.$refs.abc[index].style="text-decoration:none"
          }
       
      
     },
  components: {
     EchartChart2,
  }
}
</script>

<style scoped>
*{
    margin: 0;
    padding: 0;
  }
.el-button--primary{
    font-size: 18px;
}
.el-button--medium {
     font-size: 18px;
     
}
.el-menu{
    height: 100vh;
    
}
#container_head{
    
    height:40px;
    display: flex;
    display: -webkit-flex;
    line-height: 40px;
}




  .el-header, .el-footer {
    background-color: #f0f0f0;
    color: #333;
    text-align: center;
    line-height: 60px;
   
  }
  
  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 200px;
  }
  
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
  }
  
  body > .el-container {
    margin-bottom: 40px;
  }
  
  .el-container:nth-child(5) .el-aside,
  .el-container:nth-child(6) .el-aside {
    line-height: 260px;
  }
  
  .el-container:nth-child(7) .el-aside {
    line-height: 320px;
  }
</style>
